<template>
  <!-- 
  <img src="../assets/img/swiper.jpg" alt />-->
  <div class="index">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
        <div class="swiper-slide">
          <router-link to="/index/indexzhuanti">
            <img src="../assets/img/swiper.jpg" alt />
          </router-link>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div class="indexmain">
      <div class="mainnnav">
        <img src="../assets/img/tu1.jpg" alt />
        <img src="../assets/img/tu2.jpg" alt />
        <img src="../assets/img/tu3.jpg" alt />
        <img src="../assets/img/tu4.jpg" alt />
      </div>
      <div>
        <indexmainnav :indexmainnav="indexmainnav" />
      </div>
      <div class="swiper-container1">
        <div class="swiper-wrapper">
          <div v-for="itme in indexmainlunbo" :key="itme.id" class="swiper-slide">
            <indexmainlunbo
              :zi="itme.name"
              :guige="itme.guige1"
              :jiage="itme.tejia"
              :url="require('../assets/img/'+itme.imgurl)"
              :itmeid="itme.id"
            />
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div v-if="indexmain.length">
        <div v-for="itmes in indexmain" :key="itmes.id">
          <indexmainnav :indexmainnav="itmes" />
          <div class="indexmaintongyong">
            <indexmaincoll
              v-for="itme in itmes.nini"
              :key="itme.id"
              :zi="itme.name"
              :guige="itme.xiushici"
              :jiage="itme.tejia"
              :url="require('../assets/img/'+itme.imgurl)"
              :yuanjia="itme.danjia"
              :itmeid="itme.id"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import indexmainnav from "@/components/indexmainnav.vue";
import indexmainlunbo from "@/components/indexmainlunbo.vue";
import indexmaincoll from "@/components/indexmaincoll.vue";
import Swiper from "swiper";
import axios from "axios";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      indexmainnav: {
        zi: "礼拜五",
        zimu: "Firiday",
        is: true,
        to: "/index",
        cla: "icon-duihao2"
      },
      indexmainlunbo: [
        {
          id: 1,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 2,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 3,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 4,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 5,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 6,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 7,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 8,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 9,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 10,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 11,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 12,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 13,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 14,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 15,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        },
        {
          id: 16,
          name: "新西兰佳沛黄金奇异果",
          guige1: "6个装",
          tejia: "28.80",
          imgurl: "lunbo1.jpg"
        }
      ],
      indexmain: [
        {
          id: 1,
          zi: "新鲜水果",
          zimu: "采自新疆优质水果生产基地，品质一流",
          is: false,
          cla: "icon-gantan",
          nini: [
            {
              id: 1,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-16.png",
              danjia: "'40.00'"
            },
            {
              id: 2,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-15.png",
              danjia: "'40.00'"
            },
            {
              id: 3,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-14.png",
              danjia: "'40.00'"
            },
            {
              id: 4,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-13.png",
              danjia: "'40.00'"
            }
          ]
        },
        {
          id: 2,
          zi: "水产海鲜",
          zimu: "国内外海鲜到港的鱼虾蟹贝，我们全都有",
          is: false,
          cla: "icon-gantan",
          nini: [
            {
              id: 1,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-17.png",
              danjia: "'40.00'"
            },
            {
              id: 2,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-18.png",
              danjia: "'40.00'"
            },
            {
              id: 3,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-19.png",
              danjia: "'40.00'"
            },
            {
              id: 4,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-20.png",
              danjia: "'40.00'"
            }
          ]
        },
        {
          id: 3,
          zi: "肉类禽类",
          zimu: "采自新疆优质水果生产基地，品质一流",
          is: false,
          cla: "icon-gantan",
          nini: [
            {
              id: 1,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-16.png",
              danjia: "'40.00'"
            },
            {
              id: 2,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-15.png",
              danjia: "'40.00'"
            },
            {
              id: 3,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-14.png",
              danjia: "'40.00'"
            },
            {
              id: 4,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-13.png",
              danjia: "'40.00'"
            }
          ]
        },
        {
          id: 4,
          zi: "蛋奶速食",
          zimu: "国内外海鲜到港的鱼虾蟹贝，我们全都有",
          is: false,
          cla: "icon-gantan",
          nini: [
            {
              id: 1,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-17.png",
              danjia: "'40.00'"
            },
            {
              id: 2,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-18.png",
              danjia: "'40.00'"
            },
            {
              id: 3,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-19.png",
              danjia: "'40.00'"
            },
            {
              id: 4,
              name: "新西兰佳沛黄金奇异果",
              xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
              tejia: "28.80",
              imgurl: "banner-20.png",
              danjia: "'40.00'"
            }
          ]
        }
      ],
      lunbo1: require("../assets/img/lunbo1.jpg"),
      lunbo2: require("../assets/img/lunbo2.jpg"),
      lunbo3: require("../assets/img/lunbo3.jpg"),
      lunbo4: require("../assets/img/lunbo4.jpg")
    };
  },
  name: "index",
  components: {
    indexmainnav,
    indexmainlunbo,
    indexmaincoll
  },
  created() {
    var _this = this;
    var url = this.$store.state.url;
    axios.get(url + "indexmian").then(
      res => {
        // 成功回调
        if (res.data.length) {
          _this.indexmain = res.data;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    axios.get(url + "libaiwu").then(
      res => {
        // 成功回调
        if (res.data.code=="200") {
          _this.indexmainlunbo = res.data.data;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );

  },
  mounted(){
    this.swiper = new Swiper(".swiper-container", {
      autoplay: true, //自动播放
      loop: true, //循环播放
      delay: 3000, //每张图间隔三秒
      //分页器
      pagination: {
        el: ".swiper-pagination"
      },
      //左右前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
    new Swiper(".swiper-container1", {
      slidesPerView: 4,
      spaceBetween: 30,
      autoplay: true, //自动播放
      delay: 3000, //每张图间隔三秒
      slidesPerGroup: 4,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      }
    });
  }
};
</script>
<style scoped>
.swiper-container img {
  width: 100%;
}
.indexmain {
  width: 80%;
  margin: 0px auto;
}
.indexmain .mainnnav {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0px;
}
.indexmain .mainnnav img {
  width: 24%;
}

.swiper-container1 {
  overflow: hidden;
  position: relative;
  padding-bottom: 2rem;
  margin-top: 1rem;
}
.swiper-container1 .swiper-pagination {
  bottom: 0.6rem;
}
.indexmaintongyong {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0px;
}
.guding {
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  z-index: 11;
}
</style>